<!--
 * @Description: 
 * @Author: 若城
 * @Date: 2023-03-27 23:03:28
 * @LastEditTime: 2023-03-30 11:03:11
-->
<template>
  <view>
    <u-sticky bgColor="#fff">
      <u-tabs
        :list="list1"
        @click="handleTabs"
        :lineHeight="7"
        :scrollable="false"
        :activeStyle="{
          color: '#3a70ea',
          fontSize: '25rpx',
          paddingBottom: '10rpx',
        }"
        :inactiveStyle="{
          color: '#4e4e4e',
          fontSize: '25rpx',

          paddingBottom: '10rpx',
        }"
      ></u-tabs>
    </u-sticky>
    <u-image
    v-if="tabs == 0"
          width="750rpx"
          height="64rpx"
          src="/static/canbao.png"
          mode="widthFix"
        ></u-image>
    <u-gap v-else height="16" bgColor="#f5f5f5"></u-gap>
    <!-- 企业职工基本养老保险 -->
    <!-- 工伤保险 -->
    <!-- 失业保险 -->
    <view>
      <u-cell-group>
        <u-cell
          v-for="(item, index) in dataList"
          :key="index"
          :border="false"
          :title="item.label"
          :value="item.value"
        ></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>
<script>
import { getSXXList } from "../../api/rc";
export default {
  data() {
    return {
      tabs:0,
      list1: [
        {
          name: "企业职工基本养老保险",
        },
        {
          name: "工伤保险",
        },
        {
          name: "失业保险",
        },
      ],
      dataList: [],
    };
  },
  mounted () {
    this.handleTabs({index:0})
  },
  methods: {
    async handleTabs(item) {
      // console.log("🚀 ~ file: Insurance.vue:53 ~ handleTabs ~ item:", item);
      this.tabs = item.index
      await getSXXList({ type:  item.index + 1 }).then((res) => {
        // console.log(
        //   "🚀 ~ file: Insurance.vue:66 ~ awaitgetSXXList ~ res:",
        //   res
        // );
        switch ( this.tabs) {
          case 0:
          this.dataList = [
          {
            label: "姓名:",
            value: res.data[0].name,
          },
          {
            label: "身份证号:",
            value: res.data[0].number,
          },
          {
            label: "险种类型:",
            value: res.data[0].type,
          },
          {
            label: "参保地区:",
            value: res.data[0].address,

          },
          {
            label: "单位名称:",
            value: res.data[0].company,
          },
          {
            label: "参保状态:",
            value: res.data[0].status,
          },
          {
            label: "缴费状态:",
            value: res.data[0].money_status,
          },
          {
            label: "视同缴费月数:",
            value: res.data[0].money_num + '',

          },
          {
            label: "本次参保日期:",
            value: res.data[0].first_date,
          },
          {
            label: "首次参保日期:",
            value: res.data[0].now_date,
          },
        ];
            break;
            case 1:
            this.dataList = [
          {
            label: "姓名:",
            value: res.data[0].name,
          },
          {
            label: "身份证号:",
            value: res.data[0].number,
          },
          {
            label: "险种类型:",
            value: res.data[0].type,
          },
          {
            label: "参保地区:",
            value: res.data[0].address,

          },
          {
            label: "单位名称:",
            value: res.data[0].company,
          },
          {
            label: "参保状态:",
            value: res.data[0].status,
          },
          {
            label: "缴费状态:",
            value: res.data[0].money_status,
          },
          {
            label: "视同缴费月数:",
            value: res.data[0].money_num + '',

          },
          {
            label: "本次参保日期:",
            value: res.data[0].first_date,
          },
          {
            label: "首次参保日期:",
            value: res.data[0].now_date,
          },
        ];
            break;
            case 2:
            this.dataList = [
          {
            label: "姓名:",
            value: res.data[0].name,
          },
          {
            label: "身份证号:",
            value: res.data[0].number,
          },
          {
            label: "险种类型:",
            value: res.data[0].type,
          },
          // {
          //   label: "参保地区:",
          //   value: res.data[0].address,

          // },
          {
            label: "单位名称:",
            value: res.data[0].company,
          },
          {
            label: "参保状态:",
            value: res.data[0].status,
          },
          {
            label: "缴费状态:",
            value: res.data[0].money_status,
          },
          // {
          //   label: "视同缴费月数:",
          //   value: res.data[0].money_num + '',

          // },
          {
            label: "本次参保日期:",
            value: res.data[0].first_date,
          },
          {
            label: "参保结束日期:",
            value: res.data[0].now_date,
          },
        ];
            break;
        
          default:
            break;
        }

        // this.dataList = [
        //   {
        //     label: "姓名:",
        //     value: res.data[0].name,
        //   },
        //   {
        //     label: "身份证号:",
        //     value: res.data[0].number,
        //   },
        //   {
        //     label: "险种类型:",
        //     value: res.data[0].type,
        //   },
        //   {
        //     label: "参保地区:",
        //     value: res.data[0].address,

        //   },
        //   {
        //     label: "单位名称:",
        //     value: res.data[0].company,
        //   },
        //   {
        //     label: "参保状态:",
        //     value: res.data[0].status,
        //   },
        //   {
        //     label: "缴费状态:",
        //     value: res.data[0].money_status,
        //   },
        //   {
        //     label: "视同缴费月数:",
        //     value: res.data[0].money_num + '',

        //   },
        //   {
        //     label: "本次参保日期:",
        //     value: res.data[0].first_date,
        //   },
        //   {
        //     label: "首次参保日期:",
        //     value: res.data[0].now_date,
        //   },
        // ];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// ::v-deep .u-tabs__wrapper__nav {
//     justify-content: space-around;
//     display: flex;
// }
/deep/ .u-tabs__wrapper__nav__item {
  padding: 0 !important;
}
::v-deep .u-cell__title-text {
	 color: #9b9b9b !important;
   
}
::v-deep .u-cell__value{
  color: #4c4c4c !important;

}
</style>
<style>
</style>